<template>
  <div class="addList">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="渠道类型">
              <el-radio-group v-model="ruleForm.channelType">
                <el-radio
                  :label="item.value"
                  v-for="item in qudaoList"
                  :key="item.value"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="ruleForm.companyName" :disabled="typeof(ruleForm.id) === 'number'" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
          <!--   <el-col :xs="8">
            <el-form-item label="供应商地址：" prop="gysdz">
              <el-cascader v-model="ruleForm.companyAdress" :options="adress" style="width:100%"></el-cascader>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <el-form-item label="公司地址" prop="companyAdress">
              <el-input v-model="ruleForm.companyAdress" placeholder="请输入公司地址" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="ruleForm.contacts" placeholder="请输入联系人" :disabled="typeof(ruleForm.id) === 'number'" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="联系电话" prop="contactsNum">
              <el-input v-model="ruleForm.contactsNum" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="商户类型" prop="merchantType">
              <el-select v-model="ruleForm.merchantType" placeholder="请选择商户类型" style="width:100%">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in merchantTypeList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="8">
            <el-form-item label="分润规则" prop="shareprofitId">
              <el-select v-model="ruleForm.shareprofitId" placeholder="请选择分润规则" style="width:100%" @change="$forceUpdate()">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in fenrunList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="状态">
              <el-radio-group v-model="ruleForm.status">
                <el-radio
                  :label="item.value"
                  v-for="item in zhuangtaiList"
                  :key="item.value"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 银行账号 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">银行账号</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="账户户名"  prop="bankCardAccount">
              <el-input v-model="ruleForm.bankCardAccount" placeholder="请输入账户户名" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="银行账号" prop="bankCardNo">
              <el-input v-model="ruleForm.bankCardNo" placeholder="请输入银行账号" />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="开户行"  prop="originalBank">
              <el-input v-model="ruleForm.originalBank" placeholder="请输入开户行" />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
    </el-form>
  </div>
</template>

<script>
import comTitle from "@/views/com/com_title.vue";
import { getFenrunList } from "@/api/shop/channel/list.js";
import { isMobile, isBankCardNo } from "@/util/validate.js";
export default {
  components: {
    comTitle,
  },
  data() {
    var validPhone = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isMobile(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    var validBankCardNo = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        callback(new Error("请输入银行卡号"));
      } else if (!isBankCardNo(value)) {
        callback(new Error("请输入正确的19位银行卡号"));
      } else {
        callback();
      }
    };
    return {
      labelWidth: "120px",
      fenrunList: [],
      ruleForm: {
        // businessType: [], //业态
        channelType:'01',
        status:'00'
      },
      rules: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        companyAdress: [
          { required: true, message: "请输入公司地址", trigger: "change" },
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactsNum: [
          { required: true, validator: validPhone, trigger: "blur" },
        ],
        shareprofitId: [
          { required: true, message: "请选择分润规则",  trigger: "change" },
        ],
        businessType: [
          { required: true, message: "请选择涉及业态", trigger: "change" },
        ],
        // merchantType: [
        //   { required: true, message: "请选择商户类型", trigger: "change" },
        // ],
        bankCardNo: [
          {
            required: true,
            // validator: validBankCardNo,
            message: "请输入银行卡号",
            trigger: "blur",
          },
        ],
        bankCardAccount:[
          { required: true, message: "请输入账户户名", trigger: "blur" },
        ],
        originalBank:[
          { required: true, message: "请输入开户行", trigger: "blur" },
        ]
      },
      yetaiList: [
        //业态
        // {
        //   label: "全部业务",
        //   value: "01",
        // },
        {
          label: "商超",
          value: "02",
        },
        {
          label: "洗衣",
          value: "03",
        },
        {
          label: "家政",
          value: "04",
        },
        {
          label: "咖吧",
          value: "05",
        },
      ],
      zhuangtaiList: [
        //状态
        {
          label: "启用",
          value: "00",
        },
        {
          label: "停用",
          value: "01",
        },
      ],
      qudaoList: [
        //状态
        // {
        //   label: "平台",
        //   value: "00",
        // },
        {
          label: "分公司",
          value: "01",
        },
        {
          label: "代理商",
          value: "02",
        },
      ],
      // merchantTypeList: [
      //   //状态
      //   {
      //     label: "平台商户",
      //     value: "00",
      //   },
      //   {
      //     label: "门店商户",
      //     value: "01",
      //   },
      //   {
      //     label: "供货商商户",
      //     value: "02",
      //   },
      //   {
      //     label: "分公司商户",
      //     value: "03",
      //   },
      //   {
      //     label: "代理商商",
      //     value: "04",
      //   },
      // ],
    };
  },
  mounted() {
    this.getFenrun();
  },
  methods: {
    getFenrun() {
      getFenrunList(Object.assign({ profitRuleType: "01" }, this.page)).then(
        (val) => {
          this.fenrunList = val.data.data.records.map((item) => {
            return {
              label: item.profitRuleName,
              value: item.profitRuleId,
            };
          });
        }
      );
    },
  },
};
</script>

<style lang="scss">
</style>